// forwardRef 函数组件
// https://zh-hans.reactjs.org/docs/forwarding-refs.html

import React, { PropsWithChildren } from 'react';

interface IProps {
  ref: any;
}

// Function components cannot be given refs. Attempts to access this ref will fail.
// Did you mean to use React.forwardRef()?
function FancyButton(props: PropsWithChildren<IProps>): JSX.Element {
  return <button className="FancyButton">{props.children}</button>;
}

const FancyButtonRef: React.ForwardRefExoticComponent<any> = React.forwardRef((props, ref: any) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

export default function ForwardRefFunc() {
  const ref = React.createRef();

  React.useEffect(() => {
    console.log('ForwardRefFunc', ref);
  }, []);

  return (
    <div>
      {/* <FancyButton ref={ref}>Click me!</FancyButton>; */}
      <FancyButtonRef ref={ref}>Click me!</FancyButtonRef>
    </div>
  );
}
